<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Deposit</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div th:include="pages :: header"></div>
<div class="page-header">
    <h1 align="center">Deposit</h1>
</div>
<div style="display: table; margin-right: auto; margin-left: auto;">
    <p th:if="${error}" class="error">Failed to deposit! Please try again!</p>
    <form th:action="@{/deposit/{cardNumber}(cardNumber=${cardNumber})}" method="post" th:object="${depositForm}">
        <table>
            <tr>
                <td>Amount:</td>
                <td><input type="text" th:field="*{amount}"/></td>
                <td th:if="${#fields.hasErrors('amount')}" th:errors="*{amount}">Amount Error</td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Deposit">
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>